<template>
	<view class="container">
		<u-navbar
			title="常见问题"
			:autoBack="true"
			fixed
			placeholder
		></u-navbar>
		
		<view class="content">
			<u-collapse
				v-model="activeCollapse"
			>
				<u-collapse-item
					v-for="(category, index) in faqList"
					:key="index"
					:title="category.title"
					:name="index"
				>
					<view
						class="faq-item"
						v-for="(item, idx) in category.items"
						:key="idx"
						@click="showAnswer(item)"
					>
						<view class="question">
							<text class="iconfont icon-question"></text>
							<text class="question-text">{{ item.question }}</text>
							<text class="iconfont icon-arrow-right"></text>
						</view>
					</view>
				</u-collapse-item>
			</u-collapse>
		</view>
		
		<!-- 答案弹窗 -->
		<u-popup
			v-model="showAnswerPopup"
			mode="center"
			:closeable="true"
			:closeOnClickOverlay="true"
			@close="closeAnswerPopup"
			borderRadius="15"
		>
			<view class="answer-popup">
				<view class="answer-title">{{ currentQuestion }}</view>
				<scroll-view class="answer-content" scroll-y>
					<rich-text :nodes="currentAnswer"></rich-text>
				</scroll-view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import tools from '@/mixin/tools.js'
	
	export default {
		mixins: [tools],
		data() {
			return {
				activeCollapse: null,
				showAnswerPopup: false,
				currentQuestion: '',
				currentAnswer: '',
				faqList: [
					{
						title: '账号相关',
						items: [
							{
								question: '如何修改密码？',
								answer: '1. 进入"我的" - "账号安全设置"<br>2. 点击"修改密码"<br>3. 输入旧密码和新密码<br>4. 确认修改即可'
							},
							{
								question: '忘记密码怎么办？',
								answer: '您可以通过以下方式重置密码：<br>1. 使用绑定的手机号进行验证<br>2. 联系管理员协助重置'
							}
						]
					},
					{
						title: '任务管理',
						items: [
							{
								question: '如何查看我的任务？',
								answer: '在"我的"页面点击"我的任务"，可以查看所有分配给您的任务。任务按照状态分类显示。'
							},
							{
								question: '任务完成后如何提交？',
								answer: '1. 进入具体任务详情页<br>2. 点击"提交进度"<br>3. 填写完成情况和备注<br>4. 上传相关图片（如需要）<br>5. 点击提交即可'
							}
						]
					},
					{
						title: '系统使用',
						items: [
							{
								question: '如何更新个人信息？',
								answer: '在"我的"页面点击头像或姓名，进入个人资料页面进行修改。您可以更新头像、昵称、手机号等信息。'
							},
							{
								question: '系统遇到问题怎么办？',
								answer: '您可以：<br>1. 尝试刷新或重新登录<br>2. 清除缓存后重试<br>3. 通过"意见反馈"提交问题<br>4. 联系管理员寻求帮助'
							}
						]
					}
				]
			}
		},
		onLoad() {
			console.log('FAQ页面加载')
		},
		methods: {
			showAnswer(item) {
				this.currentQuestion = item.question
				this.currentAnswer = item.answer
				this.showAnswerPopup = true
			},
			closeAnswerPopup() {
				this.showAnswerPopup = false
				this.currentQuestion = ''
				this.currentAnswer = ''
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		background-color: #f8f8f8;
	}
	
	.content {
		padding: 20rpx;
	}
	
	.faq-item {
		padding: 20rpx 0;
		border-bottom: 1px solid #eee;
		
		&:last-child {
			border-bottom: none;
		}
	}
	
	.question {
		display: flex;
		align-items: center;
		font-size: 28rpx;
		color: #333;
		
		.icon-question {
			color: #2979ff;
			margin-right: 20rpx;
			font-size: 32rpx;
		}
		
		.question-text {
			flex: 1;
		}
		
		.icon-arrow-right {
			color: #999;
			font-size: 24rpx;
		}
	}
	
	.answer-popup {
		width: 600rpx;
		padding: 30rpx;
		box-sizing: border-box;
		
		.answer-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 20rpx;
			padding-right: 60rpx;
		}
		
		.answer-content {
			max-height: 600rpx;
			font-size: 28rpx;
			color: #666;
			line-height: 1.6;
		}
	}
</style> 